<script setup lang='ts'>
import * as yup from 'yup'
import { defineModel } from 'vue'
import { useForm } from 'vee-validate'

// 定义字段校验规则
const validationSchema = yup.object({
  position: yup.string().required('请输入岗位名称'),
  company: yup.string().required('请输入公司名称'),
  duration: yup.number().min(1, '工作时长不能小于1个月').required('请输入工作时长'),
  startDate: yup.string().required('请选择开始日期'),
  endDate: yup.string().required('请选择结束日期'),
  description: yup.string().max(500, '工作描述最长500个字符').required('请输入工作描述'),
})

// 使用vee-validate解构出的表单属性和方法
const { defineField, errors } = useForm({ validationSchema })

// 定义字段
const [position, positionAttrs] = defineField('position')
const [company, companyAttrs] = defineField('company')
const [duration, durationAttrs] = defineField('duration')
const [startDate, startDateAttrs] = defineField('startDate')
const [endDate, endDateAttrs] = defineField('endDate')
const [description, descriptionAttrs] = defineField('description')

const prop = defineModel<object>()

onMounted(() => {
  console.log('prop:', prop.value)
})

watchEffect(() => {
  const obj = {
    position: position.value,
    company: company.value,
    duration: duration.value,
    startDate: startDate.value,
    endDate: endDate.value,
    description: description.value,
  }
  prop.value = obj
})
</script>

<template>
  <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label-align="right">
    <a-row :gutter="[0, 20]" justify="start">
      <a-col :span="6">
        <a-form-item label="岗位名称">
          <a-input v-model:value="position" v-bind="positionAttrs" placeholder="请输入岗位名称" />
          <a-typography-text v-if="errors.position" type="danger">
            {{ errors.position }}
          </a-typography-text>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="公司名称">
          <a-input v-model:value="company" v-bind="companyAttrs" placeholder="请输入公司名称" />
          <a-typography-text v-if="errors.company" type="danger">
            {{ errors.company }}
          </a-typography-text>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="工作时间长">
          <a-input v-model:value="duration" v-bind="durationAttrs" placeholder="请输入工作时间长" />
          <a-typography-text v-if="errors.duration" type="danger">
            {{ errors.duration }}
          </a-typography-text>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="开始日期">
          <a-date-picker v-model:value="startDate" v-bind="startDateAttrs" value-format="YYYY-MM-DD" placeholder="请选择开始日期" />
          <a-typography-text v-if="errors.startDate" type="danger">
            {{ errors.startDate }}
          </a-typography-text>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="结束如期">
          <a-date-picker v-model:value="endDate" v-bind="endDateAttrs" value-format="YYYY-MM-DD" placeholder="请选择结束如期" />
          <a-typography-text v-if="errors.endDate" type="danger">
            {{ errors.endDate }}
          </a-typography-text>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="工作描述">
          <a-textarea v-model:value="description" v-bind="descriptionAttrs" :rows="4" placeholder="请选择结束如期" />
          <a-typography-text v-if="errors.description" type="danger">
            {{ errors.description }}
          </a-typography-text>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<style scoped>
:deep() {
  .ant-input-number,
  .ant-picker {
    width: 100%;
  }
}
</style>
